<template>
  <div class="draggable-container">
    <draggable
      v-model="configFields"
      v-bind="{ group: 'groupName', animation: 200, handle: '.draggable-move' }">
      <transition-group
        :style="{ borderTop: configFields.length > 4 ? '1px solid #EBEEFD': 'none'}"
        type="transition"
        class="draggable-item-list">
        <template v-for="(item) in configFields" >
          <div
            :key="item.key"
            :style="{ borderTop: configFields.length > 4 ? 'none' : '1px solid #EBEEFD'}"
            class="draggable-item">
            <div class="check"><el-checkbox :disabled="checkDisabled(item)" v-model="item[checkKey]" @change="onCheckboxChange" /></div>
            <div :style="{'fontWeight': item[checkKey] ? 'bold' : ''}" class="draggable draggable-move one-row">
              <ToolTip :content="item.subformFullName || item.name" />
            </div>
            <img :src="draggableImg" class="draggable-img draggable-move" alt="" >
          </div>
        </template>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import draggableImg from '@/assets/orderlist/draggable.png';
export default {
  name: 'SettingGraggable',
  components: {
    draggable
  },
  model: {
    prop: 'fields',
    event: 'change'
  },
  props: {
    groupName: {
      type: String,
      default: 'list'
    },
    checkKey: { // 选中判断字段
      type: String,
      default: 'isShow'
    },
    fields: {
      type: Array,
      default: () => []
    },
    maxSelectNum: { // 最大可选择数量
      type: Number,
      default: Infinity
    }
  },
  data() {
    return {
      draggableImg
    };
  },
  computed: {
    configFields: {
      get() {
        return this.fields;
      },
      set(list) {
        this.$emit('change', list);
      }
    }
  },
  methods: {
    // 获取当前选中的个数
    getCurSelectedNum() {
      return this.configFields.filter(field => field[this.checkKey]).length;
    },
    checkDisabled(item) {
      if (this.maxSelectNum === Infinity) return false;
      return !item[this.checkKey] && this.getCurSelectedNum() >= this.maxSelectNum;
    },
    onCheckboxChange() {
      this.$emit('getCurSelectedNum', this.getCurSelectedNum());
      this.$forceUpdate();
    }
  }
};
</script>

<style scoped lang="scss">
.draggable-container {
  max-height: 500px;
  padding: 12px 0;

  @include scrollBar($x: hidden, $y: auto);
  .draggable-item-list {
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid #EBEEFD;
    width: 640px;
    .draggable-item {
      position: relative;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #EBEEFD;
      border-right: 1px solid #EBEEFD;
      // width: 160px;
      width: 25%;
      height: 47px;
      padding: 0 17px;
      background-color: #fff;
      overflow: hidden;
      .check {
        margin-right: 8px;
      }
      .draggable {
        flex: 1;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        color:rgba(20,28,61,1);
        line-height:1.2;
      }
      .draggable-img {
        width: 16px;
        height: 16px;
        visibility: hidden;
        position: absolute;
        right: 6px;
        top: 15px;
      }
      &:hover {
        background-color: #FAFAFA;
        .draggable-img {
          visibility: visible;
        }
      }
      .draggable-move {
        cursor: move;
      }
      .draggable-tag {
        color: #FF4E5F;
        font-size: 12px;
        margin-left: 3px;
      }
      .one-row {
        display: flex;
        overflow: hidden;
        align-items: center;
      }
    }
  }
}
</style>
